<!-- 申请代理  -->
<template>
	<s-layout title="申请商务" :onShareAppMessage="state.shareInfo">
		<view class="s-category">
			<view class="bottom-wrap">
				<view class="shop-list">
					<view class="shop-card" v-for="(shop, index) in state.pagination.list" :key="shop.id">
						<!-- @tap="sheep.$router.go('/pages/index/life_store_detail', { id: shop.id })"> -->
						<image class="shop-card__thumb" :src="shop.logo" mode="aspectFill" lazy-load
							:show-menu-by-longpress="true" />

						<view class="shop-card__info">
							<!-- 修改后的名称与状态布局 -->
							<view class="name-status-wrapper">
								<text class="shop-card__name line-clamp-1">{{ shop.name  }}</text>
								<button v-if="state.applyStatus === false || !state.applyStoreIds.includes(shop.id)"
									class="ss-reset-button share-btn ui-BG-Main-Gradient" @tap.stop="onApply(shop)">
									立即申请
								</button>
								<button v-if="state.applyStatus === true && state.isEnabled === false && state.applyStoreIds.includes(shop.id)"
									class="ss-reset-button share-btn ui-BG-Main-Gradient">
									审核中
								</button>
								<button v-if="state.isEnabled === true && state.applyStoreIds.includes(shop.id)"
									class="ss-reset-button share-btn ui-BG-Main-Gradient">
									代理中
								</button>
							</view>

							<view class="star-rating">
								<image v-for="n in 5" :key="n" class="star-icon" src="/static/images/star.png"
									mode="widthFix" />
							</view>

							<view class="shop-card__meta">
								<view class="meta-left">
									<view class="address-container"> <!-- 新增容器 -->
										<image class="location-icon" src="/static/images/pos_green.png"
											mode="widthFix" />
										<text class="shop-card__address line-clamp-1">{{ shop.detailAddress  }}</text>
										<!-- <view class="distance-info"> <!-- 新增距离容器 -->
										<!-- <image class="location-icon" src="/static/images/pos_green.png"
												mode="widthFix" />
											<text class="distance-text">{{ shop.detailAddress  }}</text>
										</view> -->
									</view>
									<view class="discount-tags" v-if="shop.points?.length  > 0">
										<text v-for="(points, idx) in shop.points" :key="idx" class="discount-tag">
											{{ points.pointsValue  }}积分
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<s-empty v-if="state.pagination.total === 0" icon="/static/goods-empty.png" text="暂无入住店铺" />
		<!-- 加载更多 -->
		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
        contentdown: '上拉加载更多',
      }" @tap="loadMore" />
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		reactive,
		onMounted
	} from 'vue';
	import _ from 'lodash-es';
	import LifeCircleApi from '@/sheep/api/product/lifecircle';
	import BrokerageApi from '@/sheep/api/trade/brokerage';
	import {
		showMenuTools
	} from '../../sheep/hooks/useModal';

	const state = reactive({
		pagination: {
			list: [],
			total: 0,
			pageNo: 1,
			pageSize: 8,
		},
		loadStatus: '',
		storeInfo: {},
		type: '',
		isEnabled: '',
		applyStatus: '',
		applyStoreIds: [],
	});

	onMounted(async () => {
		state.type = 1;
		let {
			code,
			data
		} = await BrokerageApi.getBrokerageUser();
		if (code === 0) {
			state.isEnabled = data.isEnabled;
			state.applyStatus = data.isApply;
			state.applyStoreIds = data.storeIds;
		}
	});

	// 用户申请代理
	async function onApply(storeInfo) {
		let {
			code,
			data
		} = await BrokerageApi.onApply({
			applyType: state.type,
			storeId: storeInfo.id,
		});
		if (code !== 0) {
			return;
		}
		uni.showToast({
			title: '申请成功，请耐心等待审核！',
			icon: 'none',
			duration: 3000,
			complete: function() {
				refresh();
			}
		});
	}

	async function refresh() {
		let {
			code,
			data
		} = await BrokerageApi.getBrokerageUser();
		if (code === 0) {
			state.isEnabled = data.isEnabled;
			state.applyStatus = data.isApply;
			state.applyStoreIds = data.storeIds;
		}
		getStoresList();
	}

	async function getStoresList() {
		state.loadStatus = 'loading';
		let {
			code,
			data
		} = await LifeCircleApi.getStorePage({
			pageSize: state.pagination.pageSize,
			pageNo: state.pagination.pageNo,
		});
		if (code !== 0) {
			state.loadStatus = 'error'; // 处理错误状态
			return;
		}
		state.pagination.list = data.list;
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}

	onLoad(() => {
		getStoresList();
	});

	// 加载更多
	function loadMore() {
		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
		getStoresList();
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadMore();
	});
</script>

<style lang="scss" scoped>
	.s-category {
		:deep() {
			.swiper-wrap {
				width: 100%;
				height: 300rpx;

				.swiper-img {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.grid-wrap {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 20rpx;
				padding: 20rpx;
				background-color: #fff;

				.grid-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background-color: #f6f6f6;
					border-radius: 10rpx;
					padding: 20rpx;

					.grid-icon {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
					}

					.grid-text {
						font-size: 20rpx;
						color: #333;
						text-align: center;
					}
				}
			}

			.bottom-wrap {
				width: 100%;
				padding: 20rpx;

				.tab-bar {
					padding: 28rpx 32rpx;
					background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
					border-radius: 16rpx;
					box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.03);

					.tab-item {
						display: flex;
						align-items: center;
						position: relative;

						// 图标样式 
						.title-icon {
							width: 44rpx;
							height: 44rpx;
							margin-right: 16rpx;
							filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
						}

						// 文字样式增强 
						.text-with-shadow {
							flex: 1;
							font-size: 34rpx;
							font-weight: 600;
							color: #2d3436;
							text-align: left;
							letter-spacing: 1rpx;
							text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.08);
						}
					}
				}

				.shop-list {
					padding: 16rpx 24rpx;
					background: #f8f9fa;

					.shop-card {
						display: flex;
						padding: 24rpx;
						margin-bottom: 24rpx;
						background: #fff;
						border-radius: 16rpx;
						box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.03);
						transition: all 0.3s ease;

						&:active {
							transform: scale(0.98);
							opacity: 0.9;
						}

						&__thumb {
							width: 200rpx;
							height: 200rpx;
							border-radius: 12rpx;
							margin-right: 24rpx;
						}

						&__info {
							flex: 1;
							min-width: 0;
						}
					}
				}
			}

			/* 新增状态位置样式 */
			.name-status-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12rpx;

				.shop-card__name {
					flex: 1;
					margin-right: 20rpx;
					font-size: 32rpx !important;
					line-height: 1.4;
					max-width: 75%;
				}

				.shop-card__status {
					flex-shrink: 0;
					padding: 6rpx 20rpx;
					border-radius: 32rpx;
					font-size: 24rpx;
					line-height: 1.2;

					&.active {
						background: #e8f6ef;
						color: #07c160;
					}

					&.inactive {
						background: #feeeed;
						color: #ff4141;
					}
				}
			}

			.star-rating {
				display: flex;
				align-items: center;
				margin: 12rpx 0 8rpx 0;

				.star-icon {
					width: 28rpx;
					margin-right: 6rpx;
					filter: drop-shadow(0 2rpx 4rpx rgba(255, 155, 0, 0.3));
				}
			}

			.discount-tags {
				display: flex;
				gap: 8rpx;
				margin: 6rpx 0 4rpx 0;

				.discount-tag {
					flex-shrink: 0;
					padding: 4rpx 14rpx;
					background: #e8f5e9;
					border-radius: 20rpx;
					font-size: 22rpx;
					color: #2e7d32;
					border: 1rpx solid #81c784;
					white-space: nowrap;
					box-shadow: 0 2rpx 6rpx rgba(76, 175, 80, 0.12);
				}
			}

			.line-clamp-1 {
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.address-container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
			}

			.distance-info {
				display: flex;
				align-items: center;
				gap: 6rpx;
				margin-left: 20rpx;
			}

			.location-icon {
				width: 26rpx;
				height: 26rpx;
				opacity: 0.8;
			}

			.distance-text {
				font-size: 24rpx;
				color: #666;
				font-weight: 300;

				&::after {
					content: '';
					margin-left: 8rpx;
				}
			}

			.shop-card__address {
				flex: 1;
				margin-right: 20rpx;
				font-size: 26rpx !important;
				color: #444;
			}
		}
	}
</style>